<template>
    <div class="box">
      <Head></Head>
      <main>
        <el-table
    :data="foodList"
   
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <!-- <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item> -->
          <el-form-item label="商品">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.Id }}</span>
          </el-form-item>
          <!-- <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item> -->
          <el-form-item label="商品分类">
            <span>{{ props.row.food_lei }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.details }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="食品照片"
      props="food_img">
       <template  slot-scope="props">
            <el-image style="width: 50px; height: 50px; border-radius:5px" :src="baseUrl+props.row.food_img" fit="cover"></el-image>
        </template>
    </el-table-column>
    <el-table-column
      label="食品名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="食品分类"
      prop="food_lei">
    </el-table-column>
    <el-table-column
      label="价钱"
      prop="price">
    </el-table-column>
   
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        
        <el-button
          size="small"
          
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

      
      </main>
      <el-pagination
            background
            @current-change="change"
            layout="prev, pager, next"
            :total="lastYe">
            </el-pagination>

           <section  v-show="bool" @click="bian">
                  <div class="bian">
                       <el-form  ref="form" :hide-required-asterisk="bool" :model="form" label-width="80px">
            <el-form-item :required="bool" label="食品名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item :required="bool" label="食品种类">
              <el-input v-model="form.classfy" placeholder="请输入食品种类"></el-input>
            </el-form-item>
            <el-form-item label="种类描述">
              <el-input v-model="form.jieshao" placeholder="请输入种类描述"></el-input>
            </el-form-item>
            <el-form-item :required="bool" label="食品详情">
              <el-input v-model="form.xiangQ" placeholder="请输入食品详情"></el-input>
            </el-form-item>
            
            
            <el-form-item label="食物图片">
            <el-upload
            class="avatar-uploader"
            action="/myE/addShop/add_img"
            list-type="picture-card"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

            </el-form-item>
            
           
            <el-form-item label="包装费">
              <el-input-number v-model="form.baoMoney" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="价格">
              <el-input-number v-model="form.price" controls-position="right" @change="handleChange1" :min="1" :max="50"></el-input-number>
            </el-form-item>
            
            

            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认更改食品</el-button>
            
            </el-form-item>
          </el-form>
                  </div>
            </section>
    </div>
</template>

<script>
import {ajax_foodList,ajax_updateFood,ajax_deleteFood} from '../ajax/index'
import Head from '../components/head'
export default {
    name: '',
    data(){
        return{
           foodList:[], 
           yeNum:1,
           lastYe:1,
           bool:false,
           baseUrl:"http://127.0.0.1:8888/imgs/shop/",
           form: {
              name: '',
              classfy:'',
              jieshao:'',
              xiangQ:'',
              baoMoney:2,
              price:12,
              img_url:''
            
            },
            value:'',
            imageUrl: '',
            Id:'',
 
        }
    },
    inject:['reload'],
    methods:{
        handleEdit(index, row) {
        console.log(index, row);
        this.Id=row.Id;
        this.bool=true;
        this.form.name=row.name;
        this.form.classfy=row.food_lei;
        this.form.jieshao=row.jshao;
        this.form.xiangQ=row.details;
        this.form.baoMoney=row.bao_money;
        this.form.price=row.price;
        this.imageUrl=`http://127.0.0.1:8888/imgs/shop/${row.food_img}`

      },
   
      handleDelete(index, row) {
        console.log(index, row);
         this.$confirm('此操作将永久删除该食品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           ajax_deleteFood({
          Id:row.Id
        }).then(data=>{
          if(data.code==0){
                this.$message.error(data.message);
          }else if(data.code==1){
            this.$message.error(data.message);
          }else if(data.code==2){
            this.$message.success(data.message);
          }
          
          this.reload()
        })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
      },
        change(num){
            console.log(num)
            this.yeNum=num
             ajax_foodList(
            {
               yeNum:this.yeNum
            }
        ).then(data=>{
            // console.log(data.shopList);
            this.foodList=data.foodList;
            this.lastYe=data.ye
            // console.log(data.ye)
        })
        },
         bian(e){
              // console.log(e.target)
             if(e.target.tagName=="SECTION"){
              //  console.log("fei")
               this.bool=false
               console.log(this.bool)
             }
        },
        qu(){
            this.bool=false
        },
         onSubmit(){
          // console.log(this.value)
            // new Promise((resolve,reject)=>{
                   ajax_updateFood({
                    Id:this.Id,
                    name:this.form.name,
                    classfy:this.form.classfy,

                    jshao:this.form.jieshao,
                    details:this.form.xiangQ,
                   bao_money:this.form.baoMoney,
                   price:this.form.price,
                    img_url:this.img_url, 
                   
           
                    }).then(res=>{
                      alert(res.message)
                      this.reload()
                     
            }) 
        },
         handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.img_url=file.name
        console.log(file)
        // this.$refs.upload.clearFiles()
  
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
       handleChange(value) {
        console.log(value);
      },
      handleChange1(value) {
        console.log(value);
      }
        
    },
    created(){
        ajax_foodList(
            {
               yeNum:this.yeNum
            }
        ).then(data=>{
            // console.log(data.shopList);
            this.foodList=data.foodList;
            this.lastYe=data.ye
        })
    },
    beforeUpdate(){
        
    },
    updated(){
        
    },
    components:{
        Head,
    }
}
</script>

<style scoped>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

.box >>> th{
    background-color: #eef1f6;
    color: black;
}
main >>> button:nth-of-type(2){
    background-color: red;
    color: white;
}
td{
    cursor: pointer;
}
main{
  width: 92%;
  margin: 20px auto;
  border: 1px solid rgb(211, 208, 208);
}
table{
    width:100%;
    border: 1px solid gray;
    border-collapse: collapse;
    margin: 15px 0;
}
table tr{
    border: gray !important;
   
}
tr td:nth-child(n+2){
    width: 23.6%;
}
.head{
    background-color: #eef1f6;
    
}
.head td{
   padding: 8px 0;
   font-weight: 700;
}
td{
    text-align: left;
}
.content{
    position: relative;
}
.content:hover{
    background-color: rgb(250, 250, 250);
}
.content td{
    height: 50px;
    line-height: 50px;
    /* text-align: left; */
    border-top: 1px solid #ebeff3;
}
td button{
    border: none;
    outline: none;
    padding: 2px 5px;
    border-radius: 6px;
    margin: 0 5px;
    border: 1px solid gainsboro;
    background-color: white;
}
.jian{
    width: 50px;
    padding: 0 12px;
    /* position: absolute; */
    /* margin-left: 30px; */
    /* margin-right: 30px; */
}
.fenye{
    display: flex;
   margin: 15px auto;

}
.fenye p{
 padding: 2px 3px;
    margin:0 5px;
    border: 1px solid gray;
}
.fenye ul{
    display: flex;
}
.fenye li{
    padding: 5px 8px;
    border: 1px solid gray;
    margin: 0 2px;
}

section{
  width: 100%;
  height: 100vh;
  position:fixed;
  top: 0;
  left:0;
  background-color: rgba(48, 37, 37, 0.192);
}

section>.bian{
  width: 50%;
  height: 600px;
  background-color: white;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  padding: 20px;
  border-radius: 3px;
  /* margin-left: 100px; */
}
section >>> img{
  width: 100%;
  height: 100%;
}
</style>